<template>
	<view class="u-waterfall">
		<view id="u-left-column" class="u-column u-left-column">
			<view v-for="(item, index) in leftList" :key="index" class="goods-item" @click="route(item)">
				<view class="anchor-img-box">
					<image mode="widthFix" class="anchor-img" :src="item.anchor_img"></image>
					<!-- <image v-if="item.live_status === 103" class="play-icon" src="/static/image/video-play.png">
					</image> -->
				</view>
				<view class="room-info-box">
					<view class="name">{{item.name}}</view>
					<view class="user-info-box">
						<image mode="aspectFill" class="anchor-img" :src="item.anchor_img"></image>
						<span class="anchor-name">{{item.anchor_name}}</span>
					</view>
				</view>
				<view v-if="item.live_status === 101" class="tag-box tag-box-3">
					<view class="text">
						<image class="live-icon" src="/static/image/icon/liveing.png"></image>
						<span>{{item.status_text}}</span>
					</view>
				</view>
				<!--预告-->
				<view v-else-if="item.live_status === 102" class="tag-box tag-box-1">
					<view class="text">
						<view class="round"></view>
						<span>{{item.status_text}}</span>
					</view>
					<view class="text-time">{{item.text_time}}</view>
				</view>
				<view v-else-if="item.live_status === 103" class="tag-box tag-box-2">
					<view class="text">
						<view class="round"></view>
						<span>{{item.status_text}}</span>
					</view>
				</view>
				<view v-else class="tag-box tag-box-3">
					<view class="text">
						<view class="round"></view>
						<span>{{item.status_text}}</span>
					</view>
				</view>
			</view>
		</view>
		<view id="u-right-column" class="u-column u-right-column">
			<view v-for="(item, index) in rightList" :key="index" class="goods-item" @click="route(item)">
				<view class="anchor-img-box">
					<image mode="widthFix" class="anchor-img" :src="item.anchor_img"></image>
					<!-- <image v-if="item.live_status === 103" class="play-icon" src="/static/image/video-play.png">
					</image> -->
				</view>
				<view class="room-info-box">
					<view class="name">{{item.name}}</view>
					<view class="user-info-box">
						<image mode="aspectFill" class="anchor-img" :src="item.anchor_img"></image>
						<span class="anchor-name">{{item.anchor_name}}</span>
					</view>
				</view>
				<view v-if="item.live_status === 101" class="tag-box tag-box-3">
					<view class="text">
						<image class="live-icon" src="/static/image/icon/liveing.png"></image>
						<span>{{item.status_text}}</span>
					</view>
				</view>
				<!--预告-->
				<view v-else-if="item.live_status === 102" class="tag-box tag-box-1">
					<view class="text">
						<view class="round"></view>
						<span>{{item.status_text}}</span>
					</view>
					<view class="text-time">{{item.text_time}}</view>
				</view>
				<view v-else-if="item.live_status === 103" class="tag-box tag-box-2">
					<view class="text">
						<view class="round"></view>
						<span>{{item.status_text}}</span>
					</view>
				</view>
				<view v-else class="tag-box tag-box-3">
					<view class="text">
						<view class="round"></view>
						<span>{{item.status_text}}</span>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let atime = ''
	export default {
		name: "u-indexware",
		props: {
			value: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			addTime: {
				type: [Number, String],
				default: 200
			}
		},
		provide() {
			return {
				uWaterfall: this
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				tempList: [],
				children: [],
				attrShow: 0,
				goods: null
			}
		},
		onHide() {
			clearTimeout(atime)
		},
		watch: {
			copyFlowList(nVal, oVal) {
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
				if (nVal.length == 0) {
					this.emptyList()
				} else {
					this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
				}
				this.splitData();
			}
		},
		mounted() {
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
		},
		computed: {
			copyFlowList() {
				return this.cloneData(this.value);
			}
		},
		methods: {
			async splitData() {
				if (!this.tempList.length) return;
				let leftRect = await this.uGetRect('#u-left-column');
				let rightRect = await this.uGetRect('#u-right-column');
				let item = this.tempList[0];
				if (!item) return;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				}
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					atime = setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},
			uGetRect(element) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect(data => {
						resolve(data);
					}).exec();
				})
			},
			route(live) {
				let self = this;
				let userId = this.userInfo ? this.userInfo.options.user_id : 0;
				let customParams = {
					user_id: userId
				}; // 开发者在直播间页面路径上携带自定义参数
				uni.navigateTo({
					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomid}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
				})
			},
			emptyList() {
				this.leftList = [];
				this.tempList = [];
				this.rightList = [];
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 10.18
	.demo-img-wrap {
		position: relative;
	}

	.sendcoin {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		background-color: #ff0000;
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 4rpx 8rpx;
		border-radius: 32rpx;
	}

	// 10.14 商品显示
	.goldsd {
		margin: 8rpx 14rpx 24rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: bold;

		.golds {
			border: 2rpx solid #e6993f;
			color: #e6993f;
			padding: 2rpx;
			border-radius: 8rpx;
			display: inline-block;
		}

		.goldd {
			// margin-left: 8rpx;
			border: 2rpx solid #c24341;
			color: #c24341;
			padding: 2rpx;
			border-radius: 8rpx;
			display: inline-block;
			margin-top: 2rpx;
		}
	}

	.price {
		margin: 8rpx 14rpx;
		color: #FF5238;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.subtitle {
		// margin: 8rpx 14rpx 24rpx;
		margin: 8rpx 14rpx 8rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		// color: rgba(93, 93, 93, 0.8);
		color: rgba(0, 0, 0, 0.8);
		font-weight: bold;

		// 9.28
		.disprice {
			color: #ff0000;
		}
	}

	.u-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
	}

	.u-column {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.u-image {
		width: 100%;
	}

	.u-right-column {
		// margin-right: 24upx;
		margin-left: 7upx;
		margin-right: 17upx;
	}

	.u-left-column {
		margin-left: 17upx;
		// margin-left: 24upx;
		margin-right: 7upx;
	}

	.demo-image {
		width: 351rpx;
	}

	.goods-item {
		width: 351rpx;
		background-color: #fff;
		margin-top: 20upx;
		overflow: hidden;
		border-radius: 16upx;
		box-shadow: 0px 30rpx 60rpx rgba(57, 57, 57, 0.1);
		position: relative;
	}

	.anchor-img-box {
		width: 351rpx;
		border-radius: 16#{rpx};
		position: relative;
		overflow: hidden;

		.anchor-img {
			width: 351rpx;
		}

		.play-icon {
			width: 100#{rpx};
			height: 100#{rpx};
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.subscribe-box {
			position: absolute;
			top: 153#{rpx};
			left: 53#{rpx};
		}
	}

	.room-info-box {
		padding: 15#{rpx} 28#{rpx};

		.name {
			font-size: 28#{rpx};
			color: #353535;
			white-space: nowrap;
			-ms-text-overflow: ellipsis;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.user-info-box {
			display: flex;
			align-items: center;
			margin-top: 12#{rpx};

			.anchor-img {
				width: 40#{rpx};
				height: 40#{rpx};
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
			}

			.anchor-name {
				width: 200#{rpx};
				font-size: 24#{rpx};
				color: #999999;
				margin-left: 12#{rpx};
				white-space: nowrap;
				-ms-text-overflow: ellipsis;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}

	.tag-box {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
	}

	.tag-box-1 {
		.text {
			background: #22ac38;
		}

		.text-time {
			padding: 12#{rpx} 20#{rpx};
			font-size: 24#{rpx};
			color: #fff;
			background: rgba(0, 0, 0, 0.5);
			margin-left: -20rpx;
			border-bottom-right-radius: 30#{rpx};
			border-top-right-radius: 30#{rpx};
			padding-left: 30#{rpx};
		}
	}

	.tag-box-2 {
		.text {
			background: #777777;
		}
	}

	.tag-box-3 {
		.text {
			background: #ff4544;
		}

		.live-icon {
			width: 24#{rpx};
			height: 24#{rpx};
			margin-right: 12#{rpx};
		}
	}

	.round {
		width: 15#{rpx};
		height: 15#{rpx};
		background: #fff;
		border-radius: 50%;
		margin-right: 12#{rpx};

	}

	.text {
		padding: 12#{rpx} 20#{rpx};
		font-size: 26#{rpx};
		border-top-left-radius: 16#{rpx};
		border-top-right-radius: 30#{rpx};
		border-bottom-right-radius: 30#{rpx};
		z-index: 10;
		color: #fff;
		display: flex;
		align-items: center;

	}

	.goods-title {
		/* font-size: 26upx;
		color: #373737; */
		padding: 0 20upx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
	}

	.goods-content {
		padding: 0 20upx;
		margin: 12upx 0;
	}

	.gotoli {
		width: 100%;
		text-align: right;
		margin-bottom: 28rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.describe {
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
		// font-size: 22upx;
	}

	.content {
		/* font-size: 18upx;
		color: #b0b0b0; */
		color: rgba(0, 0, 0, 0.64);
		font-size: 20rpx;
		line-height: 36rpx;
		font-weight: 700;
	}
</style>
